<template>
<div>
  <h2 style="text-align: center">前端session案例</h2>
  <hr>

  <el-row :gutter="20">
    <el-col :span="12" :offset="6">
      <div class="grid-content bg-purple" style="text-align: center">
        <!--属于同一次会话-->
        <a href="/case/other">href从当前页面跳转</a><br>
        <!--这种情况默认是新会话，看是否写了opener属性-->
        <!---->
        <a href="/case/other" target="_blank">href打开新页面跳转</a><br>

        <!--这种情况默认是新会话，如果写了opener属性，那么就是同一次会话-->
        <!--
        <a href="/case/other" rel="opener" target="_blank">href打开新页面跳转</a><br>
        -->

        <el-button style="margin-top: 10px" @click="testWindowOpen">window的open方法打开</el-button><br>
        <el-button style="margin-top: 10px" type="primary" @click="testWindowLocation">window的location方法打开</el-button><br>
        <el-button style="margin-top: 10px" type="warning" @click="testRouterPush">router的push方法打开</el-button><br>
        <el-button style="margin-top: 10px" type="success"  @click="testRouterReplace">router的replace方法打开</el-button><br>
      </div>
    </el-col>
  </el-row>
</div>
</template>

<script>
export default {
  name: "SessionView",
  data(){
     return{
       msg: 'hello,javascript'
     }
  },
  mounted() {
    sessionStorage.setItem("mytitle",this.msg);
  },
  methods:{
    //默认是同一次会话。
    testWindowOpen(){
       window.open("/case/other",null);
    },
    //默认就是同一次会话
    testWindowLocation(){
       window.location.href='/case/other';
    },
    testRouterPush(){
      //也是同一次会话
      this.$router.push('/case/other',()=>{})
    },
    testRouterReplace(){
      this.$router.replace('/case/other',()=>{})
    }
  }

}
</script>

<style scoped>

</style>